<template>
    <el-container style="background-color:#f0f3f4">
        <el-header style="background-color:#ffff"  v-show="isShowBtn==1">
            <tool-bar :pageFrom="pageFrom" ref="toolbar"></tool-bar>
        </el-header>
        <el-main justify="center" align="middle" >
            <!--主要区域容器-->
            <div v-if="showFrmType == 0">
                <FrmFool :PFrmData="flowData" :isReadonlyExt="isReadonlyExt" :isReadonly="isReadonly"  :mainData="mainData"  ref="FrmFool"></FrmFool>
            </div>
            <div v-else-if="showFrmType == 1">
                <FrmDevelop :PFrmData="flowData" :isReadonlyExt="isReadonlyExt" :isReadonly="isReadonly"  :mainData="mainData"  ref="FrmDevelop"></FrmDevelop>
            </div>
            <div v-else>
                <FrmTree></FrmTree>
            </div>
            <!--<el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
                <div v-for="gf in groupFields" v-bind:key="gf.OID">
                    <div style="text-align: left">{{gf.Lab}}</div>npm
                    <el-divider></el-divider>
                    <template v-if="gf.CtrlType == '' || gf.CtrlType == null">
                        <MapAttrForm
                                :mainData="gf.mainData"
                                :mapAttrs="gf.MapAttrs"
                                @on-mainData-change="ChangeMainData">
                        </MapAttrForm>
                    </template>
                    <template v-if="gf.CtrlType=='Ath'">
                       <Ath></Ath>
                    </template>
                </div>
            </el-form>  
             <el-form v-else-if="node.FormType===1" id="FrmFree"> 
                    自由表单
            </el-form>  
             <el-form v-else-if="node.FormType===5" > 
                    树形表单
            </el-form>  
             <el-form v-if="node.FormType===12" id="FrmDevelop"  v-html="developHtml" :style="{width:widthStyle}" style="background-color:#ffff;margin:0px auto;padding:5px 10px"> 
                    开发者表单
                    {{developHtml}}
            </el-form>
            <div id="divinfo" v-show="isShowDiv">
            </div>-->

        </el-main>
       
    </el-container>
    
    
</template>
<script>
 import{FlowDevModel} from '@/api/enums.js';
 import ToolBar from "./components/tool-bar.vue";
 import FrmFool from "./ccform/FrmFool.vue";
 import FrmDevelop from "./ccform/FrmDevelop.vue";
 import FrmTree from "./ccform/FrmTree.vue";
export default {
    components: {
        ToolBar,
        FrmFool,
        FrmDevelop,
        FrmTree,
    },
    data(){
        return{
            width:'900px',
            params:{}, //参数
            webUser:{},//人员信息
            node:{}, //节点属性信息
            flow:{},//流程属性信息
            mapData:{},//表单属性
            flowData:{},//表单的所有数据
            showFrmType:0, // 表单类型   0傻瓜表单 1开发者表单 2树形结构的表单
            mainData:{},//表单数据
            developHtml:'',

            isShowDiv:false,

            isShowBtn:1,
            pageFrom:"MyFlow",//流程处理器页面
            isReadonly:0,
            isReadonlyExt:0,
        }
    },

    computed:{
        widthStyle: function() {
            return this.flowData.Sys_MapData[0].FrmW + 'px';
        }
    },
    created(){
        this.params = this.$route.params;
        this.webUser = this.$store.getters.getWebUser;
        //初始化按钮
        this.isShowBtn = this.params.IsShowBtn;
        //获取表单数据
        this.GenerWorkNode();
        this.mainData = this.flowData.MainTable[0];
        this.mapAttrs = this.flowData.Sys_MapAttr;
        this.mapExts = this.flowData.Sys_MapExt;
    },
    methods:{
        GenerWorkNode:function(){//获取流程数据
            let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyFlow");
            handler.AddJson(this.params);
            let data = handler.DoMethodReturnString("GenerWorkNode")
            if (data.indexOf('err@') == 0) {
                console.log(data);
                this.$alert("获取表单数据失败,请查看控制台日志,或者联系管理员.", {
                    dangerouslyUseHTMLString: true
                });
                return;
            }
            try {
                this.flowData = JSON.parse(data);
            } catch (err) {
                console.log(data);
                this.$alert(" GenerWorkNode转换JSON失败,请查看控制台日志,或者联系管理员.", {
                    dangerouslyUseHTMLString: true
                });
                return;
            }
            //消息提醒
            let alertMsgEle="";
            let title="";
            let count=1;
            this.flowData.AlertMsg.forEach(alertMsg=>{
                let _html ='<div>';
                _html +='<span class="titleAlertSpan"> ' + (count++) + "&nbsp;&nbsp;&nbsp;" + alertMsg.Title + '</span>';
                _html +='<div>' + alertMsg.Msg + '</div>';
                _html +='</div>';
                alertMsgEle += _html;
                title = alertMsg.Title;
            });

            if (this.flowData.AlertMsg.length != 0 ) {
                this.$alert(alertMsgEle, title, {
                    confirmButtonText: '确定',
                    dangerouslyUseHTMLString: true

                });
            }
            this.InitData();
        },

        InitData:function(){  //初始化数据
            //节点属性
            this.node = this.flowData.WF_Node!=null&& this.flowData.WF_Node!=undefined? this.flowData.WF_Node[0]:null;
            //流程属性
            this.flow = this.flowData.WF_Flow!=null && this.flowData.WF_Flow!=undefined?this.flowData.WF_Flow[0]:null;
            //表单属性
            this.mapData = this.flowData.Sys_MapData[0];
            //标题
            this.title = this.node!=null?this.node.Name: this.mapData.Name;
            //表单数据
            this.mainData = this.flowData.MainTable[0];
            let frmNode = this.flowData.WF_FrmNode!=null&& this.flowData.WF_FrmNode!=undefined? this.flowData.WF_FrmNode[0]:null;
            //解析表单的类型
            let flowDevModel = this.GetPara(this.flow.AtPara,"FlowDevModel");
            flowDevModel = flowDevModel==null || flowDevModel==undefined || flowDevModel==""?"0":flowDevModel;
            if ((flowDevModel == 1 || this.node.FormType == 11) && frmNode != null&&frmNode.FrmSln == 1)
                    this.isReadonlyExt = 1;

            //根据流程设计模式解析
            switch (parseInt(flowDevModel)) {
                case FlowDevModel.Prefessional: //专业模式
                    //根据节点的表单方案解析
                    switch (parseInt(this.node.FormType)) {
                        case 0: //傻瓜表单
                        case 10://累加表单
                            this.showFrmType=0;
                            break;
                        case 12://开发者表单
                            this.showFrmType=1;
                            break;
                        case 5://树形表单
                            this.showFrmType=2;
                            break;
                        case 11://表单库单表单
                            if (this.mapData.FrmType == 0) //傻瓜表单
                                this.showFrmType=0;
                            if (this.mapData.FrmType == 8)//开发者表单
                                this.showFrmType=1;

                            break;
                        default:
                            this.$message.error("节点表单方案:[" + this.node.FormType + "]不存在或者暂未解析，请联系管理员")
                            break;
                    }
                    break;
                case FlowDevModel.JiJian://极简模式(傻瓜表单)
                    if (this.mapData.FrmType == 0) //傻瓜表单
                        this.showFrmType=0;
                    if (this.mapData.FrmType == 8)//开发者表单
                        this.showFrmType=1;
                    break;
                case FlowDevModel.FoolTruck://累加模式
                    this.showFrmType=0; //傻瓜表单.
                    break;
                case FlowDevModel.RefOneFrmTree://表单库单表单
                    if (frmNode != null && frmNode != undefined) {
                        frmNode = frmNode[0];
                        if (frmNode.FrmType == 0) //傻瓜表单
                            this.showFrmType=0;
                        if (frmNode.FrmType == 8)//开发者表单
                            this.showFrmType=1;
                    }
                    break;
                case FlowDevModel.FrmTree://表单库多表单
                    this.showFrmType=2;
                    break;
                default:
                    this.$message.error("流程设计模式:[" + this.flow.FlowDevModel +"]不存在或者暂未解析，请联系管理员")
                    break;
            }


        },
        validateForm(){
           return this.$refs.FrmFool.validateForm();
        },
       Save(isSend){

            //只保存数据
           //保存从表数据
           //校验附件上传的数据
           //审核组件
           if(isSend==false){
               //审核组件可以不保存
           }
           if(this.showFrmType == 0){
               let flag = this.validateForm();
               if(flag == false){
                   return false;
               }
           }
            //保存
           let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyFlow");
           for(let  key in this.mainData){
               let val = this.mainData[key];
               if(val instanceof Array ){
                   handler.AddPara(key,val.join(","));
               }
               else
                   handler.AddPara(key,val);
           }
           handler.AddJson(this.params);
           let data = handler.DoMethodReturnString("Save"); //执行保存方法.
           if (isSend==false) {
               this.$alert(data);
               console.log(data);
           }
       },


    },

    mounted(){
        //开发者表单，加载完页面元素后解析页面
        //if(this.node.FormType === 12){
        //    ParseDevelopFrm(this.$route.params,this.flowData);
        //}

        this.$refs.toolbar.HelpAlert(this.node.HelpRole);
    }
}

</script>
<style scoped>

/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
  html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
 
    .el-header {
        width: 100%;
        height: 56px !important;
        line-height: 56px;
        padding: 0 20px 0 44px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
        box-sizing: border-box;
        top: 0;
    }
    /deep/.el-divider--horizontal{
        margin:12px 0px;
    }
    
</style>

